<!DOCTYPE html>
<!-- saved from url=(0133)http://www.17sucai.com/preview/98055/2016-12-08/%E6%B5%81%E9%87%8F%E6%B4%BB%E5%8A%A81/%E6%8A%BD%E5%A5%96%E7%95%8C%E9%9D%A2/index.html -->
<html style="color: rgb(0, 0, 0); background-color: rgb(204, 232, 207);">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
	<title></title>
	<link rel="stylesheet" href="__HOME__/css/bootstrap.min.css">
	<link rel="stylesheet" href="__HOME__/css/style-cj.css">
	<link href="__HOME__/css/style1.css" rel="stylesheet" type="text/css">

	<link href="__HOME__/swiper/swiper-3.4.2.min.css" rel="stylesheet" type="text/css">

</head>


<body style="color: rgb(0, 0, 0); background-color: #fff4d6;" class="">
	<img src="__HOME__/img/2.png" id="sorry-img" style="display:none;">
	<img src="__HOME__/img/1.png" id="shan-img" style="display:none;">
	<img src="__HOME__/img/3.png" id="sy-img" style="display:none;">
	<div class="main">
		<div class="banner">

			<div class="swiper-container">
				<div class="swiper-wrapper">
					{volist name="slider" id="v"}
					<div class="swiper-slide" style="width: 100%;">
						<image src="__PUBLIC__/{$v.pic}"></image>
					</div>
					{/volist}
				</div>
			</div>

		</div>
		<div class="main-header">
			<!-- <p>本月主套餐使用流量:<span>1580.00M</span></p>-->
			<p class="p1">您有
				<span class="coud_num">{$num}</span> 次免费机会</p>
		</div>
		<div class="main-body">
			<div class="banner">
				<div class="turnplate" style="background-image:url(__HOME__/img/zP.png);background-size:100% 100%;">
					<canvas style="padding: 10px;" class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
					<img id="tip" class="pointer" src="__HOME__/images/turnplate-pointer.png">
				</div>
			</div>
		</div>

		<div class="main-footer">
			<a href="{:url('jilu')}"
			 class="footer-a2">中奖记录&gt;&gt;</a>
			<!--<a href="http://www.17sucai.com/preview/98055/2016-12-08/%E6%B5%81%E9%87%8F%E6%B4%BB%E5%8A%A81/%E6%8A%BD%E5%A5%96%E7%95%8C%E9%9D%A2/index.html#"
			 class="footer-a" data-toggle="modal" data-target="#myModal">活动规则&gt;&gt;</a>-->
		</div>

	</div>
	<!-- 30元话费 -->
	<div id="apply1" class="modal fade padding1" tabindex="-1" data-replace="true" data-backdrop="static">
		<div class="modal-dialog modal-content">
			<div class="modal-body">
				<div class="img1"></div>
				<p>
					<span id="jiegou"></span>
				</p>
				<a href="http://www.17sucai.com/preview/98055/2016-12-08/%E6%B5%81%E9%87%8F%E6%B4%BB%E5%8A%A81/%E6%8A%BD%E5%A5%96%E7%95%8C%E9%9D%A2/index.html#"
				 class="colse1" data-dismiss="modal"></a>
				<button type="button" class="but5" data-dismiss="modal" data-toggle="modal">确定</button>
			</div>
		</div>
	</div>







	<!-- 温馨提示 -->
	<div id="myModal" class="modal fade s3" tabindex="-1" data-replace="true" data-backdrop="static">
		<div class="modal-dialog">
			<div class="hd-title"></div>
			<a href="http://www.17sucai.com/preview/98055/2016-12-08/%E6%B5%81%E9%87%8F%E6%B4%BB%E5%8A%A81/%E6%8A%BD%E5%A5%96%E7%95%8C%E9%9D%A2/index.html#"
			 class="close2"></a>
			<div class="modal-body" style="height: 250px; overflow: auto;">

				<p>1、活动时间：2016年10月18日——2016年12月31日。
					<br> 2、活动期间，主套餐内使用流量每达300M，即可参与抽奖一次（例：600M即2次，900M即3次，以此类推）。
					<br> 3、活动抽奖只能在当月进行，抽奖机会次数当月月底清零，次月重新计算。
					<br> 4、抽奖奖池：30元天翼手机话费（赠送话费不可抵扣SP业务、国际漫游、国际长话）、100M省内流量、300M省内流量、500M省内流量。
					<br> 5、话费和流量奖品次月10日前到账。获赠的流量包到账后，仅限获赠当月使用。流量超出后由号码本身套餐或者标准资费来收取。天翼副号、天翼小号、6分卡（0元保底）、4G 0元日租卡、上网卡、个人定制及时长型套餐等不能加装流量包套餐的用户不能订购，详询10000号。
					<br>
					<span>备注：非实名制用户不能受理流量包，请进行实名补登记后再购买。 </span>
				</p>

			</div>

		</div>
	</div>

	<script src="__HOME__/js/jquery.min.js"></script>
	<script src="__HOME__/js/bootstrap.min.js"></script>
	<script src="__HOME__/swiper/swiper-3.4.2.min.js"></script>
	<script type="text/javascript" src="__HOME__/layer/layer.js"></script>
	<script type="text/javascript">

		var mySwiper = new Swiper('.swiper-container', {
			autoplay: 5000,//可选选项，自动滑动
		})

		/* 获取抽奖机会值*/
		var nun1 = $(".coud_num").html();
		// 转盘样式，a：旋转角度，p：概率（1代表100%），t：需要显示的其它信息（文案or分享）
		var result_angle = {$data};

		var jieguo = {$data};
		var geshu = result_angle.length;

		for (var i = 0; i < result_angle.length; i++) {
			result_angle[i]['a'] = i * 360 / geshu;

		}





		var canvas = document.getElementById("wheelcanvas");
		if (canvas.getContext) {
			//根据奖品个数计算圆周角度
			var arc = Math.PI / (result_angle.length / 2);

			var ctx = canvas.getContext("2d");
			//在给定矩形内清空一个矩形
			ctx.clearRect(0, 0, 422, 422);
			//strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
			ctx.strokeStyle = "#FFBE04";
			//font 属性设置或返回画布上文本内容的当前字体属性
			ctx.font = '16px Microsoft YaHei';





			for (var i = 0; i < result_angle.length; i++) {
				//开始角度
				var angle = 0 + i * arc;
				if (i % 2 == 0) {

					ctx.fillStyle = "#FFF4D6";
				} else {
					ctx.fillStyle = "#FFFFFF";
				}

				ctx.beginPath();
				//arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
				ctx.arc(211, 211, 192, angle, angle + arc, false);
				ctx.arc(211, 211, 68, angle + arc, angle, true);
				ctx.stroke();
				ctx.fill();
				//锁画布(为了保存之前的画布状态)
				ctx.save();

				//----绘制奖品开始----
				ctx.fillStyle = "red";

				var text = result_angle[i]['desc'];
				var line_height = 17;
				//translate方法重新映射画布上的 (0,0) 位置
				ctx.translate(211 + Math.cos(angle + arc / 2) * 155, 211 + Math.sin(angle + arc / 2) * 155);


				//rotate方法旋转当前的绘图
				ctx.rotate(angle + arc / 2 + Math.PI / 2);



				if (text.indexOf("等奖") > 0) {
					//流量包
					var texts = text.split("等奖");
					for (var j = 0; j < texts.length; j++) {
						ctx.font = j == 0 ? 'bold 20px Microsoft YaHei' : '16px Microsoft YaHei';
						if (j == 0) {
							ctx.fillText(texts[j] + "等奖", -ctx.measureText(texts[j] + "等奖").width / 2, j * line_height);
						} else {
							ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
						}
					}
				} else if (text.indexOf("等奖") == -1 && text.length > 6) {
					//奖品名称长度超过一定范围
					text = text.substring(0, 6) + "||" + text.substring(6);
					var texts = text.split("||");
					for (var j = 0; j < texts.length; j++) {
						ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
					}
				} else {
					//在画布上绘制填色的文本。文本的默认颜色是黑色
					//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
					ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
				}




				if (text == "三等奖") {
					var img = document.getElementById("shan-img");
					//			  img.onload=function(){  
					//				  ctx.drawImage(img,-15,10);      
					//			  }; 
					ctx.drawImage(img, -15, 10);
				} else if (text == "谢谢参与") {
					var img = document.getElementById("sorry-img");
					//			  img.onload=function(){  
					//				  ctx.drawImage(img,-15,10);      
					//			  };  
					ctx.drawImage(img, -15, 10);
				} else if (text == "一等奖") {
					var img = document.getElementById("sy-img");
					//			  img.onload=function(){  
					//				  ctx.drawImage(img,-15,10);      
					//			  };  
					ctx.drawImage(img, -15, 10);
				}




				//在画布上绘制填色的文本。文本的默认颜色是黑色
				//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度



				//			  ctx.fillText(text, -ctx.measureText(text).width / 2, 0);


				//添加对应图标

				ctx.restore();
				//----绘制奖品结束----
			}
		}




















		var rotate = {
			rotate_angle: 0, //起始位置为0
			flag_click: true, //转盘转动过程中不可再次触发
			calculate_result: function (type, during_time) {
				//type:0,箭头转动,1,背景转动;during_time:持续时间(s)
				var self = this;
				type = type || 0; // 默认为箭头转动
				during_time = during_time || 1; // 默认为1s

				var rand_num = Math.ceil(Math.random() * 100); // 用来判断的随机数，1-100

				var result_index; // 最终要旋转到哪一块，对应result_angle的下标
				var start_pos = end_pos = 0; // 判断的角度值起始位置和结束位置

				for (var i in result_angle) {
					start_pos = end_pos + 1; // 区块的起始值
					end_pos = end_pos + 100 * result_angle[i].gailv; // 区块的结束值

					if (rand_num >= start_pos && rand_num <= end_pos) { // 如果随机数落在当前区块，那么获取到最终要旋转到哪一块
						result_index = i;
						break;
					}
				}

				var rand_circle = Math.ceil(Math.random() * 2) + 1; // 附加多转几圈，2-3

				self.flag_click = false; // 旋转结束前，不允许再次触发





				if (type == 1) { // 转动盘子
					console.log(self.rotate_angle)
					self.rotate_angle = 360 - (90 + 360 / geshu / 2) + self.rotate_angle - rand_circle * 360 - result_angle[result_index]['a'] - self.rotate_angle % 360;



					//					self.rotate_angle = self.rotate_angle  - result_angle[result_index].a ;

					$('#wheelcanvas').css({
						'transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-ms-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-webkit-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-moz-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-o-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'transition': 'transform ease-out ' + during_time + 's',
						'-moz-transition': '-moz-transform ease-out ' + during_time + 's',
						'-webkit-transition': '-webkit-transform ease-out ' + during_time + 's',
						'-o-transition': '-o-transform ease-out ' + during_time + 's'
					});
				} else { // 转动指针
					self.rotate_angle = self.rotate_angle + rand_circle * 360 + result_angle[result_index].a - self.rotate_angle % 360;
					$('.i_cont').css({
						'transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-ms-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-webkit-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-moz-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'-o-transform': 'rotate(' + self.rotate_angle + 'deg)',
						'transition': 'transform ease-out ' + during_time + 's',
						'-moz-transition': '-moz-transform ease-out ' + during_time + 's',
						'-webkit-transition': '-webkit-transform ease-out ' + during_time + 's',
						'-o-transition': '-o-transform ease-out ' + during_time + 's'
					});
				}
				// 旋转结束后，允许再次触发
				setTimeout(function () {
					self.flag_click = true;

					// 告诉结果

	
					$.post("{:url('addjiegou')}",
						{
							jiegou: result_angle[result_index]
						}, function (res) {
                         if(res){
                         	
                         		layer.msg(result_angle[result_index].name)
                         }else{
                         	alert("网络异常稍后再试")
                         }
						

						})





					
					if (parseInt(nun1) <= 0) {
//						$("#tip").attr("src","__HOME__/images/Pointer2.png");
						return false;
					}
					
					nun1--;
					$(".coud_num").html(nun1);

				}, during_time * 1000);
			}
		}
		$(document).ready(function () {
	
			
            




			$('#tip').click(function () {
				if (parseInt(nun1) <= 0) {
		layer.confirm('确认花费1积分兑换抽奖1次机会？', {
  btn: ['确认','取消'] //按钮
}, function(index){
	
	//扣除用户积分
  var url = "{:url('deljf')}"
   $.post(url,{},function(res){
   	  if(res.code == 200){
    layer.close(index);
   	  	rotate.calculate_result(1, 1);
   	  }else{
   	  	layer.msg(res.msg);
   	  }
   })

}, function(index){
   layer.close(index);
});
  return false;
				}
				if (rotate.flag_click) { // 旋转结束前，不允许再次触发
					rotate.calculate_result(1, 1);
				}
			});

		});


		$(".close2").click(function () {
			$('#myModal').modal('hide');
		});



	</script>

</body>

</html>